import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Row, Tabs} from 'antd'
import {Page} from 'components'
import {ChartCard} from 'components/Charts'
import CustomerList from '../../customer/components/List'
import ChatroomList from '../../chatroom/components/List'
import PersonalChatRecordsList from '../../personalChatRecords/components/List'
import FundRecordsList from '../../fundRecords/components/List'
import OrderList from '../../orders/components/DetailList'
import OperatorFriendCircleList from '../../operatorFriendCircle/components/List'
import OperatorLogList from '../../operatorLog/components/List'
import Detail from "./components/Detail"

const {TabPane} = Tabs

const Operator = ({
                    operatorDetail,
                    customer,
                    chatroom,
                    personalChatRecords,
                    fundRecords,
                    allOrder,
                    operatorLog,
                    operatorFriendCircle,
                    dispatch,
                    loading,
                    location,
                  }) => {
  const {data, disabled, empList, operateStatus, figureIp, friendCircleType, source, modelVisible, hideViewInfoBtn} = operatorDetail
  const {list: customerList, pagination: customerPage, selectedRowKeys: customerSKeys,} = customer
  const {list: chatroomList, pagination: chatroomPage, selectedRowKeys: chatoomSKeys} = chatroom
  const {list: personalChatRecordsList, pagination: personalChatRecordsPage, selectedRowKeys: personalChatRecordsSKeys} = personalChatRecords
  const {list: fundRecordsList, pagination: fundRecordsPage, selectedRowKeys: fundRecordsSKeys} = fundRecords
  const {list: orderList, pagination: orderPage, selectedRowKeys: orderSKeys} = allOrder
  const {list: operatorLogList, pagination: operatorLogPage, selectedRowKeys: operatorLogSKeys} = operatorLog
  const {list: operatorFriendCircleList, pagination: operatorFriendCirclePage} = operatorFriendCircle

  const openTab = (record) => {
    const tab = {
      name: '好友-'.concat(record.friendRemark || record.friendNickname),
      route: '/customer/'.concat(record.id),
    }
    dispatch({
      type: 'app/addTab',
      payload: {
        menu: tab,
      },
    })
  }

  const detailProps = {
    data,
    empList,
    operateStatus,
    hideViewInfoBtn,
    figureIp,
    friendCircleType,
    source,
    disabled,
    dispatch,
    onEdit () {
      dispatch({
        type: 'operatorDetail/updateState',
        payload: {
          disabled: false,
        },
      })
    },
    onCancel () {
      dispatch({
        type: 'operatorDetail/updateState',
        payload: {
          disabled: true,
        },
      })
    },
    handleViewHideMsg () {
      // dispatch({
      //   type: 'operatorDetail/queryPassword',
      //   payload: {
      //     wxId: data.wxId
      //   }
      // })
      dispatch({
        type: 'operatorDetail/showModal',
      })
    },
    handleSearch (key) {
      if (key) {
        dispatch({
          type: 'operatorDetail/searchEmp',
          payload: {
            key,
          },
        })
      }
    },
    handleUpdate (payload) {
      dispatch({
        type: 'operatorDetail/update',
        payload,
      })
    },
  }

  const modalProps = {
    visible: modelVisible,
    title: '验证是本人操作',
    onOk (pwd) {
      dispatch({
        type: 'operatorDetail/queryPassword',
        payload: {
          ...pwd,
          wxId: data.wxId,
        },
      })
    },
    onCancel () {
      dispatch({
        type: 'operatorDetail/hideModal',
      })
    },
  }

  const customerListProps = {
    rowKey: 'id',
    dataSource: customer.list,
    loading: loading.effects['customer/query'],
    location,
    dispatch,
    pagination: customerPage,
    onChange (page) {
      dispatch({
        type: 'customer/query',
        payload: {
          current: page.current,
          size: page.size,
        },
      })
    },
    openTab: openTab,
  }

  const chatroomListProps = {
    rowKey: 'id',
    dataSource: chatroomList,
    loading: loading.effects['chatroom/query'],
    location,
    dispatch,
    pagination: chatroomPage,
    onChange (page) {
      dispatch({
        type: 'chatroom/query',
        payload: {
          current: page.current,
          size: page.size,
        },
      })
    },
  }

  const personalChatRecordsListProps = {
    rowKey: 'id',
    dataSource: personalChatRecordsList,
    dispatch,
    loading: loading.effects['personalChatRecords/query'],
    location,
    pagination: personalChatRecordsPage,
    onChange (page) {
      dispatch({
        type: 'personalChatRecords/query',
        payload: {
          current: page.current,
          size: page.size,
        },
      })
    },
  }

  const fundRecordsListProps = {
    rowKey: 'id',
    dataSource: fundRecordsList,
    loading: loading.effects['fundRecords/query'],
    pagination: fundRecordsPage,
    location,
    dispatch,
    onChange (page) {
      dispatch({
        type: 'fundRecords/query',
        payload: {
          current: page.current,
          size: page.size,
        },
      })
    },
  }

  const orderListProps = {
    rowKey: 'id',
    dataSource: orderList,
    loading: loading.effects['allOrder/query'],
    pagination: orderPage,
    location,
    dispatch,
    onChange (page) {
      dispatch({
        type: 'allOrder/query',
        payload: {
          current: page.current,
          size: page.size,
        },
      })
    },
  }

  const operatorLogListProps = {
    rowKey: 'id',
    dataSource: operatorLogList,
    loading: loading.effects['operatorLog/query'],
    location,
    dispatch,
    pagination: operatorLogPage,
    onChange (page) {
      dispatch({
        type: 'operatorLog/query',
        payload: {
          current: page.current,
          size: page.size,
        },
      })
    },
  }

  const operatorFriendCircleListProps = {
    rowKey: 'id',
    dataSource: operatorFriendCircleList,
    loading: loading.effects['operatorFriendCircle/query'],
    pagination: operatorFriendCirclePage,
    location,
    dispatch,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
  }

  const handleTabsChange = (activeKey) => {
    let type = activeKey.split('_')[0] + '/query', flag = true
    const payload = {
      current: 1,
      size: 10,
    }
    switch (activeKey) {
      case 'customer_list':
      case 'chatroom_list':
      case 'personalChatRecords_records':
        payload['belongWxId'] = data.wxId
        break
      case 'fundRecords_list':
        payload['operatorWxId'] = data.wxId
        break
      case 'allOrder_list':
      case 'operatorLog_logs':
        payload['wxId'] = data.wxId
        break
      case 'operatorFriendCircle_list':
        payload['operatorWx'] = data.wxId
        break
      default:
        flag = false
        break
    }

    if (flag) {
      dispatch({
        type,
        payload,
      })
    }
  }

  return (
    <div>
      <Row gutter={24}>
        <ChartCard style={{marginBottom: 12}}>
          <Detail {...detailProps} modalProps={modalProps}/>
        </ChartCard>
      </Row>
      <Row gutter={24}>
        <Page inner>
          <Tabs onChange={handleTabsChange}>
            <TabPane tab={'好友列表'} key={'customer_list'}>
              <CustomerList {...customerListProps} />
            </TabPane>
            <TabPane tab={'群聊明细'} key={'chatroom_list'}>
              <ChatroomList {...chatroomListProps} />
            </TabPane>
            <TabPane tab={'聊天记录'} key={'personalChatRecords_records'}>
              <PersonalChatRecordsList {...personalChatRecordsListProps} />
            </TabPane>
            <TabPane tab={'资金明细'} key={'fundRecords_list'}>
              <FundRecordsList {...fundRecordsListProps} />
            </TabPane>
            <TabPane tab={'订单明细'} key={'allOrder_list'}>
              <OrderList {...orderListProps} />
            </TabPane>
            <TabPane tab={'朋友圈明细'} key={'operatorFriendCircle_list'}>
              <OperatorFriendCircleList {...operatorFriendCircleListProps} />
            </TabPane>
            <TabPane tab={'运营日志'} key={'operatorLog_logs'}>
              <OperatorLogList {...operatorLogListProps} />
            </TabPane>
          </Tabs>
        </Page>
      </Row>
    </div>
  )
}

Operator.propTypes = {
  operatorDetail: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({operatorDetail, customer, chatroom, personalChatRecords, fundRecords, allOrder, operatorLog, operatorFriendCircle, loading}) => ({
  operatorDetail,
  customer,
  chatroom,
  personalChatRecords,
  fundRecords,
  allOrder,
  operatorLog,
  operatorFriendCircle,
  loading,
}))(Operator)
